Allows users to select multiple options from a set of checkboxes.
Examples
Usage
Use checkbox groups for a list of options where the user can select zero, one, or more choices that are independent of each other.
Do:
layout the list of checkboxes vertically
align the checkbox to the left of the checkbox label
use subheadings to break down a long list of checkboxes into logical groups
use the label tag in HTML, so the user can select the option using both the checkbox and label
provide a clear hint such as “Select all that apply” to help users understand they can choose multiple options from a list of checkboxes, as this may not be obvious
keep hint text to a single sentence without full stop
if ‘none’ is a valid response to a question, include it as an option, selecting this should unselect the other checkboxes in the group
make sure the checkbox group is keyboard accessible and screen reader compatible
Avoid:
using the checkbox group component if you want a user to select one option out of a list, instead use radio buttons
using negations in labels such as 'Don’t send me newsletters'
using a checkbox group to toggle a single option on and off, instead use a checkbox